<script setup lang='ts' name="label-add">
import { getAppTagList, updateAppTag } from '@fl/api/xf-api/label-manage'
import { Hash } from 'node:crypto'
import { boolean } from 'zod'

const stateOptions = ref([
    {
        label: '全部',
        value: 'all',
    },
    {
        label: '启用',
        value: 1,
    },
    {
        label: '禁用',
        value: 2,
    },
])

const router = useRouter()
function backHouseTag() {
    router.push('/label-management/house-tag/tag-list')
}

const loading = ref(true)

type queryForm = {
    status?: number | string
    tagId?: number | string
    tagName?: string
    tagType?: number | string
}

const form = reactive<queryForm>({
    status: 'all',
    tagId: 'all',
    tagName: '',
    tagType: '全部',
})

function resetForm() {
    form.status = 'all'
    form.tagId = 'all'
    form.tagName = ''
    form.tagType = '全部'
    queryLabelData()
}

const labelTableData = ref([])

const tagTypeSet = reactive(new Set([]))
const tagTypeList = ref([])
const tagNameOptions = ref([])

function statusChange() {
    queryLabelData()
}

async function queryLabelData() {
    tagNameOptions.value = []
    const { code, msg, rows, total } = await getAppTagList({
        pageNum: 1,
        pageSize: 200,
        status: form.status !== 'all' ? form.status : undefined,
        tagName: form.tagName ? form.tagName : undefined,
        tagType: form.tagType !== '全部' ? form.tagType : undefined,
    })
    if (code === 200) {
        const data = rows || []
        labelTableData.value = []
        labelTableData.value = data
        if (labelTableData.value) {
            labelTableData.value.forEach((it) => {
                tagTypeSet.add(it.tagType)
                tagNameOptions.value.push({ label: it.tagName, value: it.tagName })
            })
        }
        tagTypeList.value = ['全部', ...tagTypeSet]
    }
    else {
        ElMessage.error(msg)
    }
    loading.value = false
}

function remoteQueryProject(queryString, cb) {
    const results = queryString
        ? tagNameOptions.value.filter((item) => {
            return item.value.toLowerCase().includes(queryString.toLowerCase())
        })
        : tagNameOptions.value

    cb(results)
    // return results
}

function projectChange(val) {
    const tagItem = tagNameOptions.value.find((item) => {
        return item.value === val.value
    })
    if (tagItem) {
        form.tagName = tagItem.value
    }
    else {
        form.tagName = ''
    }
}

const xTable1 = ref(null)

// 标签上移下移
async function saveAppTag(state, row) {
    const params = {
        flag: state,
        status: row.status,
        tagId: row.id,
    }
    const result = await updateAppTag(params)
    if (result.code === 200) {
        ElMessage.success('操作成功')
        queryLabelData()
    }
    else {
        ElMessage.warning(result.msg)
    }
}

// app标签切换状态
async function switchAppTagState(val, row) {
    if (row.id === null) {
        return false
    }
    const params = {
        status: row.status,
        tagId: row.id,
    }
    const result = await updateAppTag(params)
    if (result.code === 200) {
        ElMessage.success('操作成功')
        queryLabelData()
    }
    else {
        ElMessage.warning(result.msg)
    }
}

function doSearch() {
    queryLabelData()
}

onMounted(() => {
    queryLabelData()
})

onUnmounted(() => {
    labelTableData.value = []
})
</script>

<template>
    <el-card style="padding-bottom:60px">
        <el-row mb20
                style="display: flex;justify-content: space-between;"
        >
            <div>
                <el-button @click="backHouseTag">
                    <el-icon mr8
                             style="font-size: 19px"
                    >
                        <Back />
                    </el-icon> 返回列表
                </el-button>
            </div>

            <span class="dialog-footer">
                <el-button type="primary"
                           @click="backHouseTag"
                >
                    关闭
                </el-button>
            </span>
        </el-row>

        <div style="height: 500px">
            <div mb20>
                楼盘标签排序
            </div>

            <el-form :inline="true"
                     :model="form"
                     label-width="100"
                     class="query_form"
            >
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="标签名称"
                                      prop="tagName"
                        >
                            <el-autocomplete v-model="form.tagName"
                                             clearable
                                             :fetch-suggestions="remoteQueryProject"
                                             class="inline-input w-50"
                                             placeholder="请输入标签名称关键字"
                                             @select="projectChange"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="标签分类">
                            <el-row style="width:100% !important;">
                                <el-col>
                                    <el-select v-model="form.tagType"
                                               class="m-2"
                                               placeholder="请选择标签分类"
                                    >
                                        <el-option v-for="item in tagTypeList"
                                                   :key="item"
                                                   :value="item"
                                                   :label="item"
                                        />
                                    </el-select>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="状态"
                                      prop="status"
                        >
                            <el-radio-group v-model="form.status"
                                            @change="statusChange"
                            >
                                <el-radio v-for="item in stateOptions"
                                          :key="item.value"
                                          :label="item.value"
                                >
                                    {{ item.label }}
                                </el-radio>
                            </el-radio-group>
                        <!-- <el-select v-model="form.state"
                                   placeholder="请选择状态"
                                   clearable
                        >
                            <el-option v-for="item in stateOptions"
                                       :key="item.value"
                                       :value="item.value"
                                       :label="item.label"
                            />
                        </el-select> -->
                        </el-form-item>
                    </el-col>

                    <el-col :span="4"
                            style="text-align: right;"
                    >
                        <el-button type="primary"
                                   @click="doSearch()"
                        >
                            搜索
                        </el-button>

                        <el-button @click="resetForm">
                            重置
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-scrollbar>
                <vxe-table ref="xTable1"
                           :data="labelTableData"
                           :height="450"
                           :show-header="true"
                           stripe
                           border
                           :loading="loading"
                           :row-config="{ isHover: true }"
                           :tooltip-config="{ zIndex: 9999 }"
                           @checkbox-all="selectAllEvent1"
                           @checkbox-change="selectChangeEvent1"
                >
                    <!-- title="全选" -->
                    <vxe-column type="tagName"
                                field="tagName"
                                title="标签名称"
                                min-width="100"
                                show-oveflow
                    />

                    <vxe-column type="tagType"
                                field="tagType"
                                title="标签分类"
                                show-overflow="ellipsis"
                    />

                    <vxe-column type="pageAddr"
                                field="pageAddr"
                                title="页面"
                                show-overflow
                    />

                    <vxe-column type="sort"
                                field="sort"
                                title="排序"
                                show-overflow
                    />

                    <vxe-column type="state"
                                field="state"
                                title="状态"
                                show-overflow
                    >
                        <template #default="{ row }">
                            <el-switch v-model="row.status"
                                       :active-value="1"
                                       :inactive-value="2"
                                       @change="switchAppTagState($event, row)"
                            />
                        </template>
                    </vxe-column>

                    <vxe-column title="操作"
                                fixed="right"
                                width="200"
                    >
                        <template #default="{ row }">
                            <vxe-button mode="text"
                                        @click="saveAppTag(1, row)"
                            >
                                上移
                            </vxe-button>

                            <vxe-button mode="text"
                                        @click="saveAppTag(2, row)"
                            >
                                下移
                            </vxe-button>
                        </template>
                    </vxe-column>
                </vxe-table>
            </el-scrollbar>
        </div>
    </el-card>
</template>

<style lang="scss" scoped>
.query_form {
    :deep(.el-form-item) {
        width: 100%;
    }
    :deep(.el-form-item__content) {
        width: 100%;
    }
    :deep(.el-radio) {
        margin-right: 12px;
    }
}
:deep() {
    --vxe-primary-color: #da0004;
    --vxe-loading-color: #da0004;
}

:deep(.vxe-table--render-default .vxe-body--row.row--stripe) {
    background-color: #fff !important;
}
</style>
